<template>
  <div class="main">
    <div class="search">
      <el-form :inline="true" :model="search">
        <el-form-item>
          <el-button type="success" size="small" @click="form = {}; dialogShow = true">添加</el-button>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="search.title" size="small" placeholder="标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="search.type" clearable>
            <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="search.description" size="small" placeholder="备注" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="small" @click="searchClick">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table
          :data="data"
          stripe
          style="width: 100%">
        <el-table-column prop="cover" label="封面">
          <template slot-scope="scope">
            <el-image :src="scope.row.cover" fit="contain" style="height: 60px;">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" style="font-size: 60px;"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="description" label="备注" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="170px">
          <template slot-scope="scope">
            <el-button type="primary" @click="form = {...scope.row}; dialogShow = true">编辑</el-button>
            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog
        :title="form.id ? '修改' : '添加'"
        :visible.sync="dialogShow"
        fullscreen
        width="900px"
        @close="dialogClose"
    >
      <el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="80px" size="medium"
               @submit.native.prevent>
        <el-row>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="日期" prop="time">
              <el-date-picker v-model="form.time" type="date" class="full-width-input" format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="类型" prop="type" class="required">
              <el-select v-model="form.type" class="full-width-input" clearable>
                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="grid-cell">
            <el-row>
              <el-col :span="24" class="grid-cell">
                <el-form-item label="封面" prop="cover">
                  <el-upload :headers="{ token: token }" :on-success="coverSuccess"
                             action="/upload/image" list-type="picture-card" :show-file-list="true"
                             :file-list="form.cover ? [{name: '封面', url: form.cover}] : []" :limit="1">
                    <template #default><i class="el-icon-plus"></i></template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="grid-cell">
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="form.description" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div style="border: 1px solid #ccc; min-height: 700px;">
            <toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                mode="default"
            />
            <editor
                style="height: 800px; overflow-y: hidden;"
                v-model="form.content"
                :defaultConfig="editorConfig"
                mode="default"
                @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from "../util/auth";
import '@wangeditor/editor/dist/css/style.css'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

export default {
  name: "Article",
  components: {Editor, Toolbar},
  data() {
    return {
      search: {},
      dialogShow: false,
      form: {
        status: true
      },
      data: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      rules: {
        title: [
          {
            required: true,
            message: '标题不能为空',
          },
          {
            min: 1,
            max: 300,
            message: '标题长度在1-300位之间',
            trigger: 'blur'
          },
        ],
        type: [{
          required: true,
          message: '类型不能为空',
        }],
        description: [
          {
            min: 0,
            max: 800,
            message: '备注长度在3-800位之间',
            trigger: 'blur'
          }
        ]
      },
      typeOptions: [{
        "label": "公司简介",
        "value": 1
      }, {
        "label": "婚礼堂",
        "value": 2
      }, {
        "label": "培训+执行",
        "value": 3
      }, {
        "value": 4,
        "label": "经典案例"
      }, {
        "value": 5,
        "label": "定制道具"
      }, {
        "value": 6,
        "label": "轮播"
      }],
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...'
      },
    }
  },
  mounted() {
    this.getData()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      const uploadImage = this.editor.getMenuConfig('uploadImage')
      uploadImage.server = '/upload/image'
      uploadImage.fieldName = 'file'
      uploadImage.headers = {
        token: getToken()
      }
      uploadImage.maxFileSize = 10 * 1024 * 1024
      const uploadVideo = this.editor.getMenuConfig('uploadVideo')
      uploadVideo.server = '/upload/video'
      uploadVideo.fieldName = 'file'
      uploadVideo.headers = {
        token: getToken()
      }
      uploadVideo.maxFileSize = 500 * 1024 * 1024
    },
    getData() {
      this.$http.post(`article/page?pageNo=${this.pageNo}&pageSize=${this.pageSize}`, this.search).then(res => {
        if (res.code === 200) {
          this.pageSize = res.data.size
          this.pageNo = res.data.current
          this.total = res.data.total
          this.data = res.data.records
        }
      })
    },
    sizeChange(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.getData();
    },
    currentChange(val) {
      this.pageNo = val;
      this.getData();
    },
    searchClick() {
      this.pageNo = 1;
      this.getData()
    },
    dialogClose() {
      this.form = {}
      this.$refs['form'].clearValidate()
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            this.$http.put(`article`, this.form).then(res => {
              if (res.code === 200) {
                this.$Message.success(res.msg)
                this.getData()
                this.dialogShow = false
              }
            })
          } else {
            this.$http.post(`article`, this.form).then(res => {
              if (res.code === 200) {
                this.$Message.success(res.msg)
                this.getData()
                this.dialogShow = false
              }
            })
          }
        }
      });
    },
    del(id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`article/${id}`).then(res => {
          if (res.code === 200) {
            this.getData()
            this.$Message.success(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    coverSuccess(result) {
      if (result.errno === 0) {
        this.form.cover = result.data.url
      }
    }
  },
  computed: {
    token() {
      return getToken()
    }
  }
}
</script>

<style >

.w-e-text-container  .w-e-image-container{
	margin:0px !important;
}
</style>
